import React, { PropTypes } from 'react';
import { routerRedux } from 'dva/router';
import { connect } from 'dva';
import MainLayout from '../../common/pages/MainLayout/MainLayout';
import styles from './TransferFiles.less';
import TransferFileList from '../components/TransferFiles/List';
import TransferFileSearch from '../components/TransferFiles/Search';
import TransferFileModal from '../components/TransferFiles/Modal';

function TransferFiles({ location, dispatch, transferFiles }) {
  const {
    loading, list, total, current,
    currentItem, modalVisible, modalType,
    } = transferFiles;

  const { field, useritem_id } = location.query;

  const transferFileModalProps = {
    item: modalType === 'create' ? {} : currentItem,
    type: modalType,
    visible: modalVisible,
    onOk(data) {
      dispatch({
        type: `transferFiles/${modalType}`,
        payload: data,
      });
    },
    onCancel() {
      dispatch({
        type: 'transferFiles/hideModal',
      });
    },
  };

  const transferFileListProps = {
    dataSource: list,
    loading,
    total,
    current,
    onPageChange(page) {
      // dispatch(routerRedux.push({
      //   pathname: '/transferFiles',
      //   query: { page },
      // }));
      dispatch({
        type: 'transferFiles/query',
        payload: { ...location.query, page },
      });
    },
    onDeleteItem(id) {
      dispatch({
        type: 'transferFiles/delete',
        payload: id,
      });
    },
    onEditItem(item) {
      dispatch({
        type: 'transferFiles/showModal',
        payload: {
          modalType: 'update',
          currentItem: item,
        },
      });
    },
    onChangeStatusItem(item) {
      dispatch({
        type: 'transferFiles/changeStatus',
        payload: item,
      });
    },
  };

  const transferFileSearchProps = {
    field,
    useritem_id,
    onSearch(fieldsValue) {
      location.query = fieldsValue;
      dispatch({
        type: 'transferFiles/query',
        payload: fieldsValue,
      });
    },
    onShowUseritemDetail(fieldsValue) {
      dispatch({
        type: 'transferFiles/query',
        payload: fieldsValue,
      });
    },
    onAdd() {
      dispatch({
        type: 'transferFiles/showModal',
        payload: {
          modalType: 'create',
        },
      });
    },
    onClear() {
      dispatch({
        type: 'transferFiles/clear',
        payload: {
          modalType: 'clear',
        },
      });
    },
  };

  // 解决 Form.create initialValue 的问题
  // 每次创建一个全新的组件, 而不做diff
  // 如果你使用了redux, 请移步 http://react-component.github.io/form/examples/redux.html
  const TransferFileModalGen = () =>
    <TransferFileModal {...transferFileModalProps} />;

  return (
    <MainLayout location={location}>
      <div className={styles.normal}>
        <TransferFileSearch {...transferFileSearchProps} />
        <TransferFileList {...transferFileListProps} />
        <TransferFileModalGen />
      </div>
    </MainLayout>
  );
}

TransferFiles.propTypes = {
  transferFiles: PropTypes.object,
  location: PropTypes.object,
  dispatch: PropTypes.func,
};

function mapStateToProps({ transferFiles }) {
  return { transferFiles };
}

export default connect(mapStateToProps)(TransferFiles);
